import { useLocation, useParams } from 'umi';
import { useState, useEffect, useRef } from 'react';
import * as G6 from '@antv/g6';
import { isArray } from 'util';

const { Util } = G6;
const MindmapPage = () => {
   const data0 = {
    "id": "0",
    "type": "node-root",
    "level": 0,
    "label": "中心节四个地",
    "hover": false,
    "children": [
      {
        "id": "0-1",
        "type": "node-leaf",
        "level": 1,
        "label": "0节点",
        "hover": false,
        "children": [
          { "id": "0-1-1","type": "node-leaf","level": 2,"label": "0-1-1节点", "hover": false},
          { "id": "0-1-2","type": "node-leaf2","level": 2,"label": "0-1-2节点", "hover": false },
          { "id": "0-1-3","type": "node-leaf2","level": 2,"label": "0-1-3节点", "hover": false },
          { "id": "0-1-4","type": "node-leaf3","level": 2,"label": "0-1-4节点", "hover": false },
          { "id": "0-1-5","type": "node-leaf","level": 2,"label": "0-1-5节点", "hover": false },
          { "id": "0-1-6","type": "node-leaf","level": 2,"label": "0-1-6节点", "hover": false },
          { "id": "0-1-7","type": "node-leaf","level": 2,"label": "0-1-7节点", "hover": false },
          { "id": "0-1-8","type": "node-leaf","level": 2,"label": "0-1-8节点", "hover": false }
        ]
      },
      {
        "id": "0-2",
        "type": "node-leaf",
        "level": 1,
        "label": "1节点",
        "hover": false,
        "children": [
          {
            "id": "0-2-1",
            "type": "node-leaf",
            "level": 2,
            "label": "0-2-1节点",
            "hover": false,
            "children": [
              { "id": "0-2-1-1","type": "node-leaf3","level": 3,"label": "0-2-1-1节点", "hover": false },
              { "id": "0-2-1-2","type": "node-leaf","level": 3,"label": "0-2-1-2节点", "hover": false },
              { "id": "0-2-1-3","type": "node-leaf","level": 3,"label": "0-2-1-3节点", "hover": false },
              { "id": "0-2-1-4","type": "node-leaf","level": 3,"label": "0-2-1-4节点", "hover": false },
              { "id": "0-2-1-5","type": "node-leaf","level": 3,"label": "0-2-1-5节点", "hover": false },
              { "id": "0-2-1-6","type": "node-leaf","level": 3,"label": "0-2-1-6节点", "hover": false }
            ]
          },
          {
            "id": "0-2-2",
            "type": "node-leaf",
            "level": 2,
            "label": "0-2-2节点",
            "hover": false,
            "children": [
              { "id": "0-2-2-1","type": "node-leaf","level": 3,"label": "0-2-2-1节点", "hover": false },
              { "id": "0-2-2-2","type": "node-leaf","level": 3,"label": "0-2-2-2节点", "hover": false }
            ]
          },
          {
            "id": "0-2-3",
            "type": "node-leaf",
            "level": 2,
            "label": "0-2-3节点",
            "hover": false,
            "children": [
              { "id": "0-2-3-1","type": "node-leaf","level": 3,"label": "0-2-3-1节点", "hover": false },
              { "id": "0-2-3-2","type": "node-leaf","level": 3,"label": "0-2-3-2节点", "hover": false },
              { "id": "0-2-3-3","type": "node-leaf","level": 3,"label": "0-2-3-3节点", "hover": false }
            ]
          }
        ]
      },
    ]
   }
   const containerRef = useRef()
   const graphRef = useRef();
   const [data, setData] = useState(data0)
   const [type, setType] = useState()
   useEffect(()=>{
    initGraph()
    return ()=>{
      // 销毁
      if(graphRef.current){
        graphRef.current.destroy()
        graphRef.current = null
      }
    }
   }, [])
   const initGraph = () => {
    const container = containerRef.current;
    const width = container.scrollWidth;
    const height= container.scrollHeight || 500;
    
    // 自定义根节点 rect
    G6.registerNode('node-root',{
       draw(cfg, group){
         console.log(cfg, '---cfg--')
        // rect 矩形
        // 设置第三个参数时，setItemState会自动触发更新；不设置时可在setState中自定义修改之后的属性，例如hover，默认不好看，可自己设置
        const rect = group.addShape('rect', {
          attrs:{
            fill: '#169BFA',
            width: 20,
            height: 10,
            radius: [2],
          },
          name: 'rect-shape',
          draggable: true,
        })
        const text = group.addShape('text',{
          attrs: {
            text: `${fittingStr(cfg.label, 150 ,16)}`,
            x:0,
            y:0,
            fontSize: 16,
            fontWeight: 400,
            textAlign: 'center',
            fill: 'red',
            cursor: 'pointer'
          },
          action: 'edit', //点击触发，如果不设置也可以通过name区分点击区域
          draggable: true,
          name: 'text-shape',
        })
        const bbox = text.getBBox();
        const hasChildren = cfg.children;
        // 矩形节点的坐标，宽高
        rect.attr({
          x: -bbox.width/2-10,
          y: -bbox.height/2-10,
          width: bbox.width + 50,
          height: bbox.height + 20,
          stroke: cfg.hover ? 'red' : '#169BFA'
        })
        text.attr({
          x: 0,
          y: bbox.height / 2,
        })
        let rectBbox = rect.getBBox();
        // add 按钮
        // group.addShape('rect', {
        //   attrs: {
        //     x: bbox.width/2 + 20,
        //     y: rectBbox.height/2 - bbox.height/2,
        //     fill: 'green',
        //     stroke: 'yellow',
        //     opacity: cfg.hover ? 1 : 0,
        //     width: 20,
        //     height: 20,
        //     radius: [10],
        //     cursor: 'pointer',
        //   },
        //   name: 'add-btn-wrap'
        // })
        group.addShape('text', {
          attrs: {
            text: '+',
            x: bbox.width/2 + 20,
            y: bbox.height/2,
            fill: '#fff',
            fontSize: 20,
            opacity: cfg.hover ? 1 : 0,
            cursor: 'pointer',
            stroke: 'pink',
            lineWidth: 2,
          },
          name: 'add-text-wrap'
        })
        // group.addShape('rect',{
        //   attrs:{
        //     x: rectBbox.width + 10,
        //     y: rectBbox.height - 15,
        //     radius: [6],
        //     width: 12,
        //     height: 12,
        //     lineWidth: 1,
        //     cursor: 'pointer',
        //     stroke: '#333',
        //     fill: 'red', //如果不设置，点击不到这个shape上，触发不了action
        //     opacity: hasChildren ? 1 : 0,
        //   },
        //   action: 'collapse',
        //   name: 'btn-collapse'
        // })
        if(hasChildren){
          group.addShape('text',{
            attrs:{
              text: cfg.collapsed ? '+' : '-',
              x: bbox.width/2+40,
              y: bbox.height/2,
              fill: 'red',
              fontSize: 18,
              stroke: 'green',
              lineWidth: 2,
              cursor: 'pointer',
            },
            action: 'collapse',
            name: 'text-collapse'
          })
        }

        return rect    
       },
       update: undefined,
       // 此节点更新
       setState(name, value, item){
         let group = item.getContainer();
        //  const currShapeBtnAdd = group.get('children').find(item=>item.cfg.name == 'add-btn-wrap')
         const currShapeTextAdd = group.get('children').find(item=>item.cfg.name == 'add-text-wrap')
         if(name == 'hover'){
           if(value){
            //  currShapeBtnAdd.attr({ opacity: 1 })
             currShapeTextAdd.attr({ opacity: 1 })
           } else {
            // currShapeBtnAdd.attr({ opacity: 0 })
            currShapeTextAdd.attr({ opacity: 0 })
           }
         }
       }
    },'single-node')

    // 自定义叶子节点
    G6.registerNode('node-leaf',{
      draw(cfg, group){
       // rect 矩形
       const rect = group.addShape('rect', {
         attrs:{
           fill: '#b087ea',
           width: 20,
           height: 10,
           radius: [5],
         },
         name: 'rect-shape'
       })
       const text = group.addShape('text',{
         attrs: {
           text: cfg.label,
           x:0,
           y:0,
           fontSize: 15,
           fontWeight: 400,
           textAlign: 'center',
           fill: '#ffffff',
           cursor: 'pointer'
         },
         action: 'edit',
         name: 'text-shape'
       })
       const bbox = text.getBBox();
       const hasChildren = cfg.children && cfg.children.length > 0;
       const w = bbox.width > 60 ? bbox.width : 60;
       // 矩形节点的坐标，宽高
       rect.attr({
        x: -w/2-10,
        y: -bbox.height/2-10,
        width: w + 50,
        height: bbox.height + 20,
       })
       text.attr({
         x: 0,
         y: bbox.height / 2,
       })
       group.addShape('rect', {
        attrs: {
          x: w - 25,
          y: bbox.height - 40,
          fill: 'green',
          stroke: 'yellow',
          opacity: 0,
          width: 15,
          height: 15,
          radius: [8],
          cursor: 'pointer',
        },
        action: 'add',
        name: 'add-btn-wrap'
      })
      group.addShape('text', {
        attrs: {
          text: '+',
          x: w - 23,
          y: bbox.height - 24,
          fill: '#fff',
          fontSize: 14,
          opacity: 0,
          cursor: 'pointer',
        },
        action: 'add',
        name: 'add-text-wrap'
      })
      group.addShape('rect', {
        attrs: {
          x: w - 25,
          y: bbox.height - 20,
          fill: 'green',
          stroke: 'yellow',
          opacity: 0,
          width: 15,
          height: 15,
          radius: [8],
          cursor: 'pointer',
        },
        action: 'delete',
        name: 'delete-btn-wrap'
      })
      group.addShape('text', {
        attrs: {
          text: '-',
          x: w - 21,
          y: bbox.height -5,
          fill: '#fff',
          fontSize: 14,
          opacity: 0,
          cursor: 'pointer',
        },
        action: 'delete',
        name: 'delete-text-wrap'
      })
      group.addShape('rect',{
        attrs:{
          x: w + 10,
          y: bbox.height/2 - 15,
          radius: [6],
          width: 12,
          height: 12,
          lineWidth: 1,
          cursor: 'pointer',
          stroke: '#333',
          fill: 'red', //如果不设置，点击不到这个shape上，触发不了action
          opacity: hasChildren ? 1 : 0,
        },
        action: 'collapse',
        name: 'btn-collapse'
      })
      group.addShape('text',{
        attrs:{
          text: cfg.collapsed ? '+' : '-',
          x: w+12,
          y: bbox.height/2,
          fill: '#fff',
          fontSize: 16,
          cursor: 'pointer',
        },
        action: 'collapse',
        name: 'text-collapse'
      })
       return rect
      },
      update:undefined,
      // 此节点更新
      setState(name, value, item){
        let group = item.getContainer();
        const currShapeBtnAdd = group.get('children').find(item=>item.cfg.name == 'add-btn-wrap')
        const currShapeTextAdd = group.get('children').find(item=>item.cfg.name == 'add-text-wrap')
        const currShapeBtnDelete = group.get('children').find(item=>item.cfg.name == 'delete-btn-wrap')
        const currShapeTextDelete = group.get('children').find(item=>item.cfg.name == 'delete-text-wrap')
        if(name == 'hover'){
          if(value){
            currShapeBtnAdd.attr({ opacity: 1 })
            currShapeTextAdd.attr({ opacity: 1 })
            currShapeBtnDelete.attr({ opacity: 1 })
            currShapeTextDelete.attr({ opacity: 1 })
          } else {
            currShapeBtnAdd.attr({ opacity: 0 })
            currShapeTextAdd.attr({ opacity: 0 })
            currShapeBtnDelete.attr({ opacity: 0 })
            currShapeTextDelete.attr({ opacity: 0 })
          }
        }
      }
    },'single-node')

  // 自定义节点 dom
  G6.registerNode('node-leaf2',{
    draw(cfg, group){
     // rect 矩形
     const rect = group.addShape('rect', {
       attrs:{
         fill: '#169BFA',
         width: 150,
         radius: [10],
       },
       name: 'rect-shape',
     })
     const text = group.addShape('text',{
       attrs: {
         text: `${cfg.label}`,
         x:0,
         y:0,
         fontSize: 16,
         fontWeight: 400,
         textAlign: 'center',
         fill: '#fff',
         cursor: 'pointer'
       },
       name: 'text-shape',
     })
     const bbox = text.getBBox();
    //  const hasChildren = cfg.children;
    
    //  text.attr({
    //    x: 0,
    //    y: bbox.height / 2,
    //  })
    //  if(hasChildren){
    //    group.addShape('marker',{
    //      attrs:{
    //        x: bbox.width / 2 + 15,
    //        y: 0,
    //        r: 3,
    //        symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
    //        lineWidth: 1,
    //        cursor: 'pointer',
    //        stroke: '#cococo'
    //      }
    //    })
    //  }
     group.addShape('dom', {
       attrs:{
         width: bbox.width + 50,
         height: bbox.height + 20,
         x: -bbox.width / 2 - 10,
         y: -bbox.height / 2 - 10,
         html:`<div style="position:relative;width:100%;height: 100%;align-items: center;display: flex;color:red; cursor:pointer">${cfg.label}
         <span style="position:absolute;right:7px;top:10px;cursor:pointer;opacity:${!cfg.hover ? '1':'0'};color:#e9f1ed;">+</span>
         </div>`
       },
       name: 'dom-shape',
     })
     return rect    
    },
    update(cfg, node){},
 })
  // jsx語法 与draw一致
  const position = [[0,0.5],[1,0.5]]
  G6.registerNode('node-leaf3', {
    jsx: (cfg) => {
      const borderStyle = { stroke: '#70A2E1', radius: 6, fill: '#DCE6F2', lineWidth:2 }
      const labelStyle = { fontSize: '16px',  }
      const tipStyle = { marginTop: '-15px',stroke: '#409EFF', fill: '#409EFF', cursor: 'pointer' }
      const w = Util.getTextSize(cfg.label, 16)[0] + 50;
      const wObj = {width: w}
      const styObj = Object.assign({}, borderStyle, wObj)
      const currTipStyObjAdd = Object.assign({}, { marginLeft: w-30, opacity: cfg.hover ? 0.75 : 0, next: 'line' },tipStyle)
      const currTipStyObjDelete = Object.assign({}, { marginLeft: w-20, opacity: cfg.hover ? 0.75 : 0, next: 'line' },tipStyle)
      return `
        <rect draggable="true" style={${styObj}} keyshape="true">
          <text style={${labelStyle}}>${cfg.label}</text>
          ${type == 'add' ? '' : <text action='add' style={currTipStyObjAdd}>+</text>}
          ${type == 'add' ? '' : <text action='delete' style={currTipStyObjDelete}>-</text>}
        </rect>`
    },
    getAnchorPoints(){
      return position
    }
  }, 'single-node')
    G6.registerBehavior('dice-mindmap', {
      getEvents(){
        return {
          'node:click': 'clickNode',
          'node:dblclick': 'editNode',
          'node:mouseenter': 'hoverNode',
          'node:mouseleave': 'hoverNodeOut',
        }
      },
      clickNode(evt){
        const model = evt.item.get('model');
        const name = evt.target.get('action');
        // 此处的action为draw节点时自定义(node-leaf定义了)
        switch(name){
          case 'add': commonAddNodeFn(evt, model); break;
          case 'delete': nodeDelete(evt, model); break;
          case 'edit': ; break;
          case 'collapse': commonCollapseFn(evt, model); break;
          default:  defaultNodeClick(evt, model); break;
        }
      },
      editNode(evt){
        nodeEdit(evt)
      },
      hoverNode(evt){
        nodeHover(evt, true)
      },
      hoverNodeOut(evt){
        nodeHover(evt, false)
      }
    })
    
    // 自定义tooltip
    const tooltip = new G6.Tooltip({
      offsetX: 10,
      offsetY: 10,
      trigger: 'hover',
      itemTypes: ['node','edge'],
      getContent: (e) => {
        const outDiv = document.createElement('div');
        outDiv.style.width = '180px';
        outDiv.innerHTML = `<div style="padding: 5px;background: #000;"><h4>自定义的tooltip</h4>
        <div style="font-size: 16px;color:#fff;">label:${e.item.getModel().label}</div></div>`
        return outDiv
      },
      className: '',
    })
    graphRef.current = new G6.TreeGraph({
      container: containerRef.current,
      width,
      height,
      linkCenter: false, // 指定边是否连入节点中心
      pixelRatio: 2,
      fitView: true, //画布自适应
      fitViewPadding:[10, 20],
      renderer: 'svg',
      plugins: [tooltip],
      modes: {
        default: [
          {
            type: 'node-root', // 默认值的类型
            labelCfg:{  //上面自定义已设置，此处不生效
              style:{
                fill: '#ffffff',
                fontSize: 20
              }
            },
        },
        // {
        //   type: 'tooltip',
        //   offset: 0,
        //   formatText: model => {
        //     const styObj = {color: 'red'}
        //     return `<div style={${styObj}}>${model.label}</div>`
        //     // return model.label
        //   }
        // },
        // {
        //   type: 'collapse-expand',
        //   onChange: function onChange(item, collapsed) {
        //     var data = item.get('model').data;
        //     // data.collapsed = collapsed;
        //     // return true;
        //   }
        // }, 
        'drag-canvas', 'zoom-canvas','drag-node','dice-mindmap']
      },
      // 文字样式
      defaultNode: {
        size: 16,
        anchorPoints: [[0, 0.5], [1, 0.5]],
        labelCfg:{
          style:{
            fill: '#333',
            fontSize: 20
          }
        },
        style: {
          width: 150,
          stroke: '#096dd9',
        },
      },
      // 边的样式
      defaultEdge: {
        shape: 'cubic-horizontal',
        style: {
          stroke: '#A3B1BF'
        }
      },
      layout: {
        type: 'mindmap',
        direction: 'H',
        getHeight: function getHeight() {
          return 16;
        },
        getWidth: (node) =>{
          return node.level === 0 ? Util.getTextSize(node.label, 16)[0]+20:Util.getTextSize(node.label, 12)[0]
        },
        getVGap: function getVGap() {
          return 10;
        },
        getHGap: function getHGap() {
          return 100;
        }
      }
    });
    var centerX = 0;
    graphRef.current.node(function(node) {
      if (node.id === '0') {
        centerX = node.x;
      }
      
      return {
        size: 26,
        style: {
          fill: '#40a9ff',
          stroke: '#096dd9'
        },
        label: node.label || node.id,
        labelCfg: {
          position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left'
        }
      };
    });
    graphRef.current.data(data);
    graphRef.current.render();
    // TODO 拖动
    graphRef.current.on('node:dragstart', e=>{
      graphRef.current.layout();
      refreshDragedNodePosition(e)
    })
    graphRef.current.on('node:drag', e=>{
      refreshDragedNodePosition(e)
    })
    graphRef.current.on('node:dragend', e=>{
      // e.item.get('model').fx = null;
      // e.item.get('model').fy = null;
    })
  }
  // 1.draw节点点击 name:undefined，没有定义action时，通过name判断
  const defaultNodeClick = (evt, model) => {
     if(model.type == 'node-root'){
      if(evt.target.get('name') == 'add-text-wrap' || evt.target.get('name') == 'add-btn-wrap'){
        commonAddNodeFn(evt, model)
      }
      if(evt.target.get('name') == 'delete-text-wrap' || evt.target.get('name') == 'delete-btn-wrap'){
        graphRef.current.removeChild(model.id)  
      }
    }
  }
  // 删除节点
  const nodeDelete = (evt,model) => {
    // const parentModel = evt.item.get('parent').getModel();
    // const parentItem = graphRef.current.findById(parentModel.id) //父节点
    graphRef.current.removeChild(model.id)
    // graphRef.current.layout(false)
    graphRef.current.updateLayout()
    // parentItem.refresh()
    // graphRef.current.refresh();
    // graphRef.current.refreshPositions();
    
  }
  // 编辑节点
  const nodeEdit = (evt) => {
    let item = evt.item;
    let model = item.get('model');
    let { x,y } = item.calculateBBox();
    const graph = evt.currentTarget;
    const realPosition = evt.currentTarget.getClientByPoint(x,y);
    const el = document.createElement('div')
    const fontSizeMap = {
      'node-root': 24,
      'node-leaf': 18
    }
    el.style.fontSize = fontSizeMap[model.type] + 'px';
    el.style.position = 'fixed';
    el.style.top = realPosition.y + 'px';
    el.style.left = realPosition.x + 'px';
    el.style.paddingLeft = '12px';
    el.style.transformOrigin = 'top left';
    el.style.transform = `scale(${evt.currentTarget.getZoom()})`;
    let input = document.createElement('input');
    input.style.border = 'none';
    input.value = model.label;
    input.style.width = Util.getTextSize(model.label, fontSizeMap[model.type])[0] + 15 + 'px';
    input.className = 'dice-input'
    el.appendChild(input)
    document.body.appendChild(el)
    const destroyEl = () => {
      document.body.removeChild(el)
    }
    const clickEvt = (event) => {
      if(!(event.target && event.target.className == 'dice-input')){
        window.removeEventListener('mousedown', clickEvt)
        window.removeEventListener('scroll', clickEvt)
        graphRef.current.updateItem(item, { label: input.value })
        // graphRef.current.layout(false)
        graphRef.current.updateLayout()
        graphRef.current.off('wheelZoom', clickEvt)
        destroyEl()
      }
    }
    graphRef.current.on('wheelZoom', clickEvt)
    window.addEventListener('mousedown', clickEvt)
    window.addEventListener('scroll', clickEvt)
    input.addEventListener('keyup', (event)=>{
      if(event.key === 'Enter'){
        clickEvt({ target:{} })
      }
    })
  }
  const nodeHover = (evt, hoverStatus) => {
    const node = evt.item;
    const model = node.get('model')
    // console.log(model, '---model--')
    // 1.自定义draw节点更新(针对node-root节点)
    if(model.type == 'node-root' || model.type == 'node-leaf'){
      if(hoverStatus){
        if(evt.target.get('name') == 'rect-shape'){
          updateNodeBySetState(evt, hoverStatus)
        }
      } else {
        updateNodeBySetState(evt, hoverStatus)
      }
    }
    // 2.jsx语法定义节点更新？
    // 3.dom语法定义节点更新？
  }
  const refreshDragedNodePosition = (e) => {
    const model = e.item.get('model');
    model.fx = e.x;
    model.fy = e.y;
  }
  // 1.draw节点更新，搭配setState
  const updateNodeBySetState = (evt, hoverStatus) => {
    graphRef.current.setItemState(evt.item, 'hover', hoverStatus)
  }
  // 添加node
  const commonAddNodeFn = (evt, model) => {
    let newId = '0'
    if(model.children){
      if(model.children.length > 0) {
        let lastNum = model.children[model.children.length - 1].id.split('-').pop()
        newId = model.id + '-' + (Number(lastNum) +1)
      } else {
        newId = model.id + '-1'
      }
    } else {
      newId = model.id + '-1'
    }
    const newModel = {
      id: newId,
      label: '新增节点',
      // direction: newId.charCodeAt(newId.length - 1) % 2 === 0 ? 'right' : 'left',
      direction: 'H',
      type: 'node-leaf'
    }
    graphRef.current.updateItem(evt.item, {
      children: (model.children || []).concat([newModel])
    })
    graphRef.current.layout(false)
    evt.item.refresh(); //刷新图形样式等(调用了一些直接操作图形的接口，解决节点新增了但是图形没有改，例如没有展示有子节点的图标)
  }
  // 折叠node
  const commonCollapseFn = (evt, model) => {
    evt.item.getModel().collapsed = !evt.item.getModel().collapsed;
    graphRef.current.setItemState(evt.item, 'collapsed', evt.item.getModel().collapsed);
    graphRef.current.layout(false)
    evt.item.refresh()
  }
  const calcStrLen = str => {
    let len = 0;
    for(var i = 0;i<str.length;i++){
      if(str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128){
        len++
      } else {
        len+=2
      }
    }
    return len;
  }
  const fittingStr = (str,maxWidth,fontSize) => {
    let fontWidth = fontSize * 1;
    maxWidth = maxWidth * 1.6;
    let width = calcStrLen(str) * fontWidth;
    let ellipsis = '...'
    if(width > maxWidth){
      let actualLen = Math.floor((maxWidth - 20)/fontWidth);
      let res = str.substring(0, actualLen)
      let result = ''
      if((str.substring(actualLen).length + ellipsis.length) * fontWidth > maxWidth){
        result = res + '\n' + str.substring(actualLen,actualLen+actualLen-2) + ellipsis;
      } else if(str.substring(actualLen).length == 0){
        result = str.substring(0, actualLen);
      } else {
        result = res + '\n'+str.substring(actualLen)
      }
      return result
    } else {
      return str
    }
  }
  return (
    <div style={{width: '100%', height: '100vh'}}>
      <div ref={containerRef} className="map" style={{width: '100%', height: '100%'}}></div>
    </div>
  );
};

export default MindmapPage;
